/*

text-overflow universal solution

[1] default ellipsis: \02026
[2] same as text node's line-height
[3] The background color default set to white, modify it if the background color does not match

*/
.text-overflow{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}

.text-overflow-block{
    overflow: hidden;
}

.text-overflow-block{
    white-space: auto;
    -o-text-overflow: none;
    text-overflow: none;

    /*background: #f00;*/
}

/* Shim */
.text-overflow-block:before{
    content:"";
    float: left;
    width: 5px;
    height: 100%;
    line-height: inherit;
}

/* Text node */
.text-overflow_text,
.text-overflow-block > *:first-child{
    float: right;
    width: 100%;
    margin-left: -5px;
}

/* Ellipsis node */
.text-overflow-block:after,
.text-overflow_end{
    content: "\02026"; /* 1 */

    float: right; position: relative; text-align: right;
    padding-right: 5px; left: 100%;

    top: -15px; /* 2 */

    width: 3em; margin-left: -3em;

    /* IE9 SVG */
    background: url();

    background: -webkit-gradient(linear, left top, right top,
            from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
